<template>
	<view>
		<!-- 景点图片 -->
		<image class="image" :src="item.pic" mode="aspectFill"></image>
		 
		<view class="info">
			<view class="name">
				{{item.name}}
				你到这里有{{dis}}km
				<uni-fav :checked="item.favorite" circle="true"  @click="onClickFavorite(item)" />
				<button type="button" class="goto-button" @tap="goto">去这里</button>
			</view>
			<view class="description">
				{{ item.description }}
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		CONFIG,
		headers1
	} from '../../utils/config';

	import {
		userStore
	} from "../../store/userStore";
	import {
		getMapDistance
	} from "@/utils/tools.js"
	let store = userStore()
	let item = ref({})

	let dis = computed(() => getMapDistance(store.currentPos.longitude, store.currentPos.latitude,
		item.value.lon, item.value.lat))

	onLoad((data) => {
		// getItemById(data.id)
		const json = decodeURI(data.item)
		item.value = JSON.parse(json)
		console.log(item.value);
	})

	function goto() {
		uni.navigateTo({
			url: `/pages/mywebView/mywebView?lat=${item.value.lat}&lon=${item.value.lon}&name=${item.value.name}&type=2`
		})
		console.log('开始执行goto函数')
	}

	function onClickFavorite(item) {
		item.favorite = !item.favorite
	}
</script>

<style>
	/* 为整个视图容器设置一些基础样式 */
	.view {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 10px;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 8px;
		background-color: #fff;
	}

	/* 图片样式 */
	.image {
		width: 350px;
		height: 300px;
		border-radius: 8px;
		/* overflow: hidden;*/
		margin: 12px;
	}

	/* 信息容器样式 */
	.info {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
	}

	/* 名称样式 */
	.name {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	/* 描述样式 */
	.description {
		font-size: 14px;
		color: #666;
		margin-top: 10px;
	}

	/* 按钮样式 */
	.goto-button {
		margin-top: 10px;
		padding: 8px 16px;
		background-color: #55aaff;
		color: #ffffff;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.goto-button:hover {
		background-color: #007acc;
	}

	/* 收藏图标样式 */
	.uni-fav {
		/* margin-top: 10px; */
		float: right;
		font-size: 24px;
		cursor: pointer;
	}

	/* 收藏图标被选中时的样式 */
	.uni-fav.checked {
		color: #0055ff;
	}
</style>